<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1822超市</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

    <style>
        /* 页面整体样式 */
        html,
        body,
        #app {
            height: 100%;
            margin: 0;
            font-family: "Microsoft YaHei", sans-serif;
        }

        /* 整体容器样式 */
        .el-container {
            height: 100vh;
            display: flex;
            background: linear-gradient(135deg, #4e73df, #1cc88a);
        }

        /* 左侧菜单栏样式 */
        .el-aside {
            width: 270px;
            background-color: transparent;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Logo和标题容器样式 */
        .logo-container {
            text-align: center;
            margin-top: 30px;
        }

        /* Logo样式 */
        .logo-image {
            width: 180px;
            display: block;
            margin: 0 auto;
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* 标题样式 */
        .head {
            margin-top: 10px;
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(45deg, #ffffff, #ffcc00);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        /* 菜单样式 */
        .el-menu {
            background-color: transparent;
            border-right: none;
            width: 100%;
        }

        .el-menu-item {
            margin: 10px 15px;
            border-radius: 10px;
            transition: background-color 0.3s ease;
            color: white;
        }

        .el-menu-item:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .el-menu-item.is-active {
            background-color: rgba(255, 255, 255, 0.4);
            color: #fff;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 右侧内容区样式 */
        .el-main {
            flex: 1;
            background-color: transparent;
            display: flex;
            flex-direction: column;
            /* 修改为列方向布局 */
            align-items: flex-start;
            /* 将内容对齐到顶部 */
            padding: 20px;
            /* 适当的内边距 */
        }

        /* 内容卡片样式 */
        .content-card {
            width: 90%;
            /* 增大宽度 */
            max-width: 100%;
            /* 增大最大宽度 */
            background-color: transparent;
            /* 设置透明背景 */
            padding: 40px;
            /* 增加内边距 */
            border-radius: 0;
            /* 去除圆角 */
            box-shadow: none;
            /* 去除阴影 */
        }

        /* 渐变色字体样式 */
        .menu-text {
            background: linear-gradient(45deg, #ff6a00, #ffcc00);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            font-size: 16px;
            /* 增大字体 */
        }

        th {
            background-color: #f4f4f4;
            font-weight: bold;
        }

        td {
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-aside>
                <!-- Logo和标题 -->
                <div class="logo-container">
                    <img src="img/supermarket.png" alt="超市Logo" class="logo-image">
                    <el-text size="large" class="head">1822超市</el-text>
                </div>

                <!-- 菜单项 -->
                <el-menu :default-active="activeMenu" router>
                    <el-menu-item index="/">
                        <router-link to="/">个人信息</router-link>
                    </el-menu-item>
                    <el-menu-item v-if="userData.role === 'Administrator'" index="/worker-management">
                        <router-link to="/worker-management">员工管理</router-link>
                    </el-menu-item>
                    <el-menu-item v-if="userData.role === 'Administrator'" index="/customer-management">
                        <router-link to="/customer-management">顾客管理</router-link>
                    </el-menu-item>
                    <el-menu-item v-if="userData.role === 'Administrator'" index="/area-management">
                        <router-link to="/area-management">区域管理</router-link>
                    </el-menu-item>
                    <el-menu-item v-if="userData.role === 'Administrator'" index="/shelves-management">
                        <router-link to="/area-management">货架管理</router-link>
                    </el-menu-item>
                    <el-menu-item index="/product-metadata-management">
                        <router-link to="/product-metadata-management">商品数据</router-link>
                    </el-menu-item>
                    <el-menu-item @click="logout">
                        <el-text>退出登录</el-text>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <div class="content-card">
                    <router-view></router-view>
                </div>
            </el-main>
        </el-container>
    </div>

    <!-- 引入路由的页面。 -->
    <script src="./pages/user-profile.js"></script>
    <script src="./pages/worker-management.js"></script>
    <script src="./pages/customer-management.js"></script>
    <script src="./pages/area-management.js"></script>
    <script src="./pages/shelves-management.js"></script>
    <script src="./pages/product-metadata-management.js"></script>
    <script>
        const { createApp, ref } = Vue;
        const { createRouter, createWebHashHistory } = VueRouter;

        // 配置路由
        const routes = [
            { path: '/', component: UserProfile },
            { path: '/worker-management', component: WorkerManagement },
            { path: '/customer-management', component: CustomerManagement },
            { path: '/area-management', component: AreaManagement },
            { path: '/shelves-management', component: ShelvesManagement },
            { path: '/product-metadata-management', component: ProductMetadataManagement },
        ];

        const router = createRouter({
            history: createWebHashHistory(),
            routes
        });

        const app = createApp({
            setup() {
                const userData = ref(JSON.parse(localStorage.getItem('userData') || '{}')); // 获取当前账户的信息。
                const activeMenu = ref('/');    // 用于控制菜单的激活状态

                // 退出登录。
                const logout = () => {
                    localStorage.setItem('userdata', {});
                    window.location.href = "index.html";
                }

                // 根据当前的路由设置初始的菜单项
                router.afterEach((to) => {
                    if (to.path === '/') {
                        activeMenu.value = '/';
                    } else if (to.path === '/worker-management') {
                        activeMenu.value = '/worker-management';
                    } else if (to.path === '/customer-management') {
                        activeMenu.value = '/customer-management';
                    } else if (to.path === '/area-management') {
                        activeMenu.value = '/area-management';
                    } else if (to.path === '/shelves-management') {
                        activeMenu.value = '/shelves-management';
                    } else if (to.path === '/product-metadata-management') {
                        activeMenu.value = '/product-metadata-management';
                    }
                });


                return {
                    userData,
                    activeMenu,
                    logout
                };
            }
        });

        app.use(router);
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>

</html>